<!DOCTYPE html>
<html>
<head>
    <title>打印</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="./jquery-3.5.1.js"></script>
    <script src="./jQuery.print.js"></script>
    <script src="./jquery.qrcode.min.js"></script>
    <style>
        @page {
            width: 40mm; /* 设置打印页面的宽度为210mm */
            height: 30mm; /* 设置打印页面的高度为297mm */
            margin: 1mm; /* this affects the margin in the printer settings */
        }
    </style>
    <script>
        //从 canvas 提取图片 image 的处理方法
        function convertCanvasToImage(canvas) {
            //新Image对象，可以理解为DOM
            var image = new Image();
            // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
            // 指定格式 PNG
            image.src = canvas.toDataURL("image/png");
            return image;
        }

        function printThis(thisdiv) {
            var mycanvas = document.getElementsByTagName('canvas')[0]
            var img = convertCanvasToImage(mycanvas);
            // $("#imagQrDiv").append(img);//imagQrDiv表示你要插入的容器id


            //print打印时去掉页眉和页脚
            $("#print-content").print({
                globalStyles: true,//是否包含父文档的样式，默认为true
                mediaPrint: false,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
                noPrintSelector: ".avoid-this",//不想打印的元素的jQuery选择器，默认为".no-print"
            });
        }
    </script>
</head>
<body>
<button id="print-btn" onclick="printThis()">打印</button>

<div id="print-content" style="display: flex;
    align-items: center;
    flex-direction: column;">
    <div id="code"></div>
    <div style="display: flex;">
        <div style="font-size: 9px">测试档案名称</div>
        <div style="font-size: 9px;margin-left: 20px;">2024-02-06</div>
    </div>

</div>
<div>
    12312
</div>
<script>
    function toUtf8(str) {
        var out, i, len, c;
        out = "";
        len = str.length;
        for (i = 0; i < len; i++) {
            c = str.charCodeAt(i);
            if ((c >= 0x0001) && (c <= 0x007F)) {
                out += str.charAt(i);
            } else if (c > 0x07FF) {
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            } else {
                out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            }
        }
        return out;
    }

    $("#code").qrcode({
        render: "canvas", //也可以替换为canvas,table
        width: 70,  //二维码宽度
        height: 70, //二维码高度
        text: toUtf8('ZXKJ:cce3e8b43f544132aa214ec8d90a4e4a')
    })
</script>
</body>
</html>